import * as React from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import './index.less';
const logo = require('../../../images/login_title.png');

interface Props {
  category: string,
  setCategory: any
}

interface State {
  showList: boolean
}

export default class HomeHeader extends React.Component<Props, State> {
  state = {
    showList: false
  }
  handleClick = () => {
    this.setState({ showList: !this.state.showList })
  }
  changeCategory = (event) => {
    let category = event.target.dataset.category;
    this.setState({ showList: false }, () => this.props.setCategory(category));
  }
  render() {
    let { category } = this.props
    let { showList } = this.state
    return (
      <div className='home-header'>
        <div className="home-menu">
          <img src={logo} alt="logo" />
          <div>
            <i className={showList ? 'iconfont icon-guanbi' : 'iconfont icon-uilist'} onClick={this.handleClick}></i>
          </div>
        </div>
        <TransitionGroup>
          {
            showList && (
              <CSSTransition
                classNames = 'fade'
                timeout = {500}
              >
                <ul className="menu-list" onClick={this.changeCategory}>
                  <li className={category === 'human' ? 'active' : ''} data-category='human'>人类</li>
                  <li className={category === 'elf' ? 'active' : ''} data-category='elf'>精灵</li>
                  <li className={category === 'undead' ? 'active' : ''} data-category='undead'>亡灵</li>
                  <li className={category === 'orc' ? 'active' : ''} data-category='orc'>兽人</li>
                </ul>
              </CSSTransition>
            )
          }
        </TransitionGroup>
      </div>
    )
  }
}